<template>
	<div>
		<div class="breadcrumb">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>{{$store.state.company.companyName}}</el-breadcrumb-item>
				<el-breadcrumb-item>智能装备</el-breadcrumb-item>
				<el-breadcrumb-item>网卡管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="tableNavBox">
			<div class="tableBoxTable" style="margin-bottom: 50px;">
				<template>
					<el-table :data="pageData.items" style="width: 100%">
						<el-table-column prop="flowId" label="流量卡ID"></el-table-column>
						<el-table-column prop="cardBase" label="卡所在公司"></el-table-column>
						<el-table-column prop="cardBase" label="卡作用基地"></el-table-column>
						<el-table-column prop="cardEquipment" label="卡作用设备"></el-table-column>
						<el-table-column prop="effectiveTime" label="有效期至"></el-table-column>
						<el-table-column prop="residualFlow" label="剩余流量/总流量(M)">
							<template slot-scope="scope">
								{{ scope.row.residualFlow }} / {{ scope.row.cardFlow }}
							</template>
						</el-table-column>
						<el-table-column prop="status" label="卡状态">
							<template slot-scope="scope">
								{{ scope.row.status == 1?'未激活':'激活' }}
							</template>
						</el-table-column>
						<el-table-column prop="address" label="位置">
							<template slot-scope="scope">
								<img src="@/assets/image/digitalOrchard/dingwei.png" alt="" style="margin:0 auto"
									class="mapBtn" @click="mapBtn(scope.row)" />
							</template>
						</el-table-column>
						<el-table-column prop="address" label="操作">
							<template slot-scope="scope">
								<!-- <el-button type="text" size=" " @click="check(scope.row)">查询</el-button> -->
								<el-button type="text" size=" " class="isdelete" @click="modify(scope.row)">提醒
								</el-button>
							</template>
						</el-table-column>
					</el-table>
				</template>
				<pagina-tion :totalNum="pageData.totalNum" @paginaClick="paginaClick"></pagina-tion>









				<!-- <tableForm :addNew="false" :pageData="pageData" :title="'网卡管理'" :data="data">
					<template slot="g" slot-scope="scope">
						<el-button type="text" size=" " @click="check(scope.row)">查看</el-button>
						<el-button type="text" size=" " class="isdelete" @click="modify(scope.row)">续费</el-button>
					</template>
				</tableForm> -->
			</div>

		</div>
	</div>
</template>

<script>
	// import tableForm from '@/components/tableForm.vue'
	export default {
		components: {
			// tableForm
		},
		data() {
			return {
				companyId: '',
				companyName: this.$store.state.company.companyName,
				userId: '',
				pageData: [],
				pageNum: 1
			}
		},
		created() {
			this.$store.commit('digitalOrchard_leftNavIndex', 31)
		},
		mounted() {
			// this.$store.commit('set_teamNavIndex', 212)
			let store = this.$store.state.user
			this.userId = store.userInfo.id

			this.companyId = this.$store.state.company.selectCompanyId ?
				this.$store.state.company.selectCompanyId : this.$store.state.company.companyId


			this.getPageData()
		},
		watch: {


		},
		methods: {
			check(row) {
				// 查询
				console.log(row)
			},
			modify(row) {
				// 提醒
				// this.$confirm('跳转到第三方网站续费', '提示', {
				// 	confirmButtonText: '确定',
				// 	cancelButtonText: '取消',
				// 	type: 'warning'
				// }).then(() => {
				// 	window.open('http://www.baidu.com')
				// })
				console.log(row)
			},
			mapBtn(row) {
				// 定位
			},
			getPageData() {
				// 获取表格数据
				if(this.companyId){
					this.$request.postForm(this.$napi.equipQueryNetCard, {
					companyId: this.companyId,
					pageSize: $globalData.pageSize,
					page: this.pageNum
					}).then(res => {
						if (res.code == 200) {
							this.pageData = res.data
						}
						console.log(this.pageData)
					})
				}
			},
			paginaClick(val) {
				this.pageNum = val
				this.getPageData()
			}
		}
	}
</script>

<style scoped="scoped">
	.breadcrumb,
	.tableNavBox {
		padding: 20px;
	}

	.tableNavBox {
		padding-top: 0;
	}

	.tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}

	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		margin-bottom: 20px;
		margin-top: 20px;
	}

	.dialogVisible>>>.el-input__inner {
		width: 270px;
	}

	.mapBtn {
		cursor: pointer;
	}

	.isdelete {
		color: #ED2929 !important;
	}
</style>
